<template>
	<div class="bargain-info-container">
		<div class="bargain-info-container-user">
			<div class="bargain-info-container-user-avatar">
				<img src="" alt="user avatar">
				<span class="iconfont icon-user"></span>
			</div>
			<div class="bargain-info-container-user-nick" v-html="joiner.nick"></div>
		</div>
		<div class="bargain-info-container-message">我发现一件好货，来帮我砍到最低价吧~</div>
		<bargain-info-goods :basicInfo="basicInfo" :info="info"/>
		<div class="bargain-info-container-price">
			当前价 <span>{{nowPrice | numberFixed}}</span>元，
			已砍 <span>{{allBargain | numberFixed}}</span>元
		</div>
		<div class="bargain-info-container-actions">
			<button v-if="hasUser&&user.user.id===info.uid">以当前价购买</button>
			<button v-else-if="!hasUser&&user.user.id===info.uid" @click="helpBargain">自己先砍一刀</button>
			<button v-else>帮好友砍一刀</button>
			<button @click="dialogShow">邀请好友砍价</button>
		</div>
		<overTime :date="info.dateAdd"/>
	</div>
</template>

<script>
	import bargainInfoGoods from './goods';
	import overTime from './overTime';
	import {mapState} from 'vuex';
	import Bargain from '@/services/bargain';

	const _bargain = new Bargain();
	export default {
		name: "bargainInfoContainer",
		props: {
			joiner: {
				type: Object,
				required: true
			},
			info: {
				type: Object,
				required: true
			},
			basicInfo: {
				type: Object,
				required: true
			},
			helps: {
				type: Array,
				required: true
			},
			nowPrice: {
				type: Number,
				required: true
			},
			allBargain: {
				type: Number,
				required: true
			}
		},
		computed: {
			...mapState(['user']),
			hasUser() {
				return this.helps.some(item => item.nick === this.joiner.nick);
			}
		},
		methods: {
			helpBargain() {
				let params = {
					token: this.user.token,
					kjid: this.info.kjId,
					joinerUser: this.info.uid
				};
				_bargain.helpBargain(params).then(res => {
					this.$emit('getBargainInfo')
				})
			},
			dialogShow() {
				this.$emit('dialogShow')
			}
		},
		filters: {
			numberFixed(value) {
				return value.toFixed(2);
			}
		},
		components: {
			bargainInfoGoods,
			overTime
		}
	}
</script>
